<template>
  <el-dialog title="客服提醒" width="40%" :visible.sync="show" :modal="true" @close="dialogClose">
    <el-form ref="form" :model="form" label-width="160px" style="margin-right:80px">
      <el-form-item v-if="form.salesman" label="业务员联系方式:">
        <label>{{ form.salesman.phone || '' }}</label>
      </el-form-item>
      <el-form-item label="凭证(最多上传3张)" prop="credentials" :rules="rules.def" label-width="160px">
        <el-upload
          ref="upload"
          :file-list="fileList"
          :action="upload.img.url"
          list-type="picture-card"
          :multiple="false"
          :limit="3"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="uploadSuccess"
          :on-exceed="gobeyond"
        >
          <i class="el-icon-plus" />
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="备注" prop="remark" label-width="160px">
        <el-input v-model="form.remark" type="textarea" class="col" placeholder="备注" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button v-loading="modal_loading" type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
// import adminSupport from 'lola-admin-support-el'
export default {
  // mixins: [adminSupport.mixins.base],
  props: {},
  data() {
    return {
      show: false,
      form: {},
      modal_loading: false,
      rules: this.$ruleStore.rules,
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      upload: {
        img: {
          url: this.$http.conf.api.get('portal').url + '/api/upload/img',
          path: 'upload/img',
          accept: 'image/*'
        },
        pub: {
          url: this.$http.conf.api.get('portal').url + '/api/upload/local',
          path: 'upload/pub',
          accept: 'pub/*'
        }
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      console.log('=======111')
      console.log(self.upload)
    },
    bind(row) {
      this.show = true
      this.form = row
      this.fileList = []
      this.form.credentials = []
      this.form.remark = ''
    },
    submit() {
      const that = this
      if (that.form.credentials.length < 1) {
        that.$message.error('请上传凭证')
        return
      }
      this.modal_loading = true
      const url = that.$http.conf.api.get('wms').url + '/api/ser/remind/save'
      that.form.credentials = JSON.stringify(that.form.credentials)
      const data = {
        salesmanId: that.form.salesmanId,
        salesmanName: that.form.salesman.realName,
        supplierId: that.form.id,
        supplierName: that.form.name,
        serviceId: that.form.serviceId,
        service: that.form.serviceIdName,
        credentials: that.form.credentials,
        remark: that.form.remark,
        remindDay: that.form.remindDay
      }
      that.$http.post(url, data).then(function(rsp) {
        that.modal_loading = false
        if (rsp.code !== 200) {
          that.$message.error(rsp.message)
          return
        }
        that.$message.success('操作成功!')
        that.show = false
        that.$emit('bindQuery', data)
      }).catch(function(err) {
        that.modal_loading = false
        console.log(err)
      })
    },
    // 上传图片
    uploadSuccess(response, file, fileList) {
      console.log(response)
      console.log(file)
      console.log(fileList)
      if (response.code !== 200) {
        this.$message.error(response.message)
        return
      }
      this.form.credentials.push(response.data)
      console.log(this.form.credentials)
    },
    // 移除图片
    handleRemove(file, fileList) {
      console.log(file)
      console.log(fileList)
      const index = this.form.credentials.indexOf(file.response.data)
      console.log('index ===' + index)
      if (index > -1) {
        this.form.credentials.splice(index, 1)
      }
    },
    // 预览图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 文件超出个数限制时的钩子
    gobeyond() {
      this.$message.error('最多可上传3张图片')
    },
    // 监听弹出层关闭
    dialogClose() {
      this.fileList = []
      this.form.credentials = []
      this.form.remark = ''
    }
  }
}
</script>
<style scoped>
 .el-dialog__wrapper{
   z-index: 3000 !important;
 }
</style>
